<template>
    <div>
      <Modal v-model="addModal" :title="title" width="600" cancel-text="关闭" style="position:relative;">
        <Form ref="people" :model="people" :rules="rules" :disabled=readonly  label-position="right" :label-width="100" v-if="addModal">
          <table>
            <tr>
              <td>
                <FormItem label="姓名" prop="name">
                  <Input v-model="people.name" ></Input>
                </FormItem>
              </td>
              <td>
                <FormItem label="证件号码" prop="card_no">
                  <Input v-model="people.card_no" ></Input>
                </FormItem>
              </td>
            </tr>
            <tr>
              <td>
                <FormItem label="联系电话" prop="phone">
                  <Input v-model="people.phone" ></Input>
                </FormItem>
              </td>
              <td>
                <FormItem label="政治面貌" prop="political_status">
                  <Select v-model="people.political_status">
                    <Option value="中共党员">中共党员</Option>
                    <Option value="中共预备党员">中共预备党员</Option>
                    <Option value="九三学社社员">九三学社社员</Option>
                    <Option value="共青团员">共青团员</Option>
                    <Option value="农工党党员">农工党党员</Option>
                    <Option value="台盟盟员">台盟盟员</Option>
                    <Option value="无党派人士">无党派人士</Option>
                    <Option value="普通居民">普通居民</Option>
                    <Option value="民建会员">民建会员</Option>
                    <Option value="民盟盟员">民盟盟员</Option>
                    <Option value="民进会员">民进会员</Option>
                    <Option value="民革党员">民革党员</Option>
                    <Option value="致公党党员">致公党党员</Option>
                  </Select>
                </FormItem>
              </td>
            </tr>
            <tr>
              <td>
                <FormItem label="学历" prop="education">
                  <Select v-model="people.education">
                    <Option value="小学">小学</Option>
                    <Option value="初中">初中</Option>
                    <Option value="高中">高中</Option>
                    <Option value="专科">专科</Option>
                    <Option value="本科">本科</Option>
                    <Option value="硕士">硕士</Option>
                    <Option value="博士">博士</Option>
                  </Select>
                </FormItem>
              </td>
              <td>
                <FormItem label="岗位" prop="post">
                  <Select v-model="people.post">
                    <Option value="主任">主任</Option>
                    <Option value="书记">书记</Option>
                    <Option value="书记主任一肩挑">书记主任一肩挑</Option>
                    <Option value="党委委员">党委委员</Option>
                    <Option value="副主任">副主任</Option>
                    <Option value="副书记">副书记</Option>
                    <Option value="副书记兼副主任">副书记兼副主任</Option>
                    <Option value="居委委员">居委委员</Option>
                    <Option value="居委委员兼党委委员">居委委员兼党委委员</Option>
                    <Option value="干事">干事</Option>
                  </Select>
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <FormItem label="家庭住址" prop="address">
                  <Input v-model="people.address" style="width: 450px"></Input>
                </FormItem>
              </td>
              <td>
              </td>
            </tr>
          </table>
        </Form>
        <div slot="footer">
          <Button type="text" size="large" @click="cancle()">取消</Button>
          <Button type="primary" size="large" @click="confirm('people')"  v-if=!readonly >确定
          </Button>
        </div>
      </Modal>
    </div>
</template>

<script>

  import { add, update } from '../js/index.js';

  export default {
    components: {

    },
    data () {
      return {
        addModal: false,
        title: '',
        readonly: false,
        people: {},
        fieldsValidate: [ 'name', 'card_no' ],
        rules: {
          name: [
            { required: true, message: '姓名信息必填', trigger: 'blur' }
          ],
          card_no: [
            { required: true, message: '证件号码信息必填', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '联系电话信息必填', trigger: 'blur' }
          ],
          political_status: [
            { required: true, message: '政治面貌信息必填', trigger: 'change' }
          ],
          education: [
            { required: true, message: '学历信息必填', trigger: 'change' }
          ],
          post: [
            { required: true, message: '岗位信息必填', trigger: 'change' }
          ],
          address: [
            { required: true, message: '家庭住址信息必填', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      cancle() {
        let that = this
        that.people = {}
        that.addModal = false
      },
      confirm(name) {
        let that = this
        let validate = true;
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!')
          } else {
            this.$Notice.error({ title: '必填信息未填写完成!', desc: '必填信息未填写完成!' })
            validate = false
          }
        })
        if (validate) {
          if (that.people.id) {
            update(this.people).then(ret => {
              if (ret.data.errcode === 0) {

              } else {
                this.$Notice.error({
                  title: '保存失败',
                  desc: ret.data.errmsg
                })
              }
            }).finally(() => {
              that.addModal = false
              that.$parent.reloadData()
            })
          } else {
            add(this.people).then(ret => {
              if (ret.data.errcode === 0) {

              } else {
                this.$Notice.error({
                  title: '保存失败',
                  desc: ret.data.errmsg
                })
              }
            }).finally(() => {
              that.addModal = false
              that.$parent.reloadData()
            })
          }
        }
      },
      create () {
        let that = this;
        that.addModal = true
      }
    }
  }
</script>
